<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三角形</title>
	<style>
		.dd {

			/* 用css边框制作三角 */
			width: 0;
			height: 0;
			border-top: 10px solid red;
			border-right: 10px solid green;
			border-bottom: 10px solid pink;
			border-left: 10px solid orange;
		}

		.pp {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px;
			
			/* 指定上三角， 其他部分给透明色 */
			border-color: red transparent transparent transparent;
		}


		.sanjiao {
			position: relative;
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		
		.sanjiao p {
			width: 0;
			height: 0;
			border-width: 10px;
			border-style: solid;
			border-color: transparent transparent  pink transparent;

			position: absolute;
			left: 50%;
			margin-left: -10px;
			top: -36px;
		}
	</style>
</head>
<body>
	<div class="dd"></div>
	<p class="pp"></p>

	<!-- 京东三角 -->
	<div class="sanjiao">
		<p></p>
	</div>
</body>
</html>